<template>
  <a-modal :width="1200" v-model:visible="showDetail" :footer="false" title="申购明细" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <div class="purchase-application-item-detail">
      <a-scrollbar style="height: 100%; overflow: auto" outer-class="product-info-w">
        <div class="product-info">
          <div class="img-w">
            <ImgPopover :src="detailInfo.productImg">
              <template #con>
                <a-image width="120" height="120" fit="contain" :src="detailInfo.productImg" :preview="false" />
              </template>
            </ImgPopover>
          </div>
          <div>
            <div class="sku-info">
              <p>品名：{{ detailInfo.productName }}</p>
              <p>SKU：{{ detailInfo.sku }}</p>
              <p>SPU：{{ detailInfo.spu }}</p>
              <p>类目：{{ detailInfo.cateName }}</p>
              <p>规格：{{ getProductSpecs(detailInfo) }}</p>
              <p>备注：{{ detailInfo.remark }}</p>
            </div>
            <div class="purchase-info">
              <template v-if="detailInfo.purchaseSpecsArr">
                <div class="header">
                  <p class="title">采购参数</p>
                </div>
                <p v-for="(prop, k) in detailInfo.purchaseSpecsArr" :key="k">
                  <span>{{ prop.name }}：</span>
                  <span>{{ getStrVal(prop.purchaseValue) }}</span>
                </p>
              </template>
            </div>
          </div>
        </div>
      </a-scrollbar>
      <div class="purchase-detail-order" v-if="detailInfo.id">
        <a-tabs v-model:active-key="activeTab" size="small">
          <a-tab-pane key="1" title="申购信息" />
          <a-tab-pane key="2" title="入库信息" />
          <a-tab-pane key="3" title="留言" />
          <a-tab-pane key="4" title="日志" />
        </a-tabs>
        <a-scrollbar v-if="activeTab == '1'" outer-class="application-info-w" style="width: 100%; height: calc(84vh - 170px); overflow: auto">
          <div class="item flex-c">
            <p class="label">状态：</p>
            <p class="val">
              <span class="highlight">{{ statusMap[detailInfo.status] }}</span>
              <span class="urgent" v-if="detailInfo.urgent">急</span>
            </p>
          </div>
          <div class="item flex">
            <p class="label">申购数量：</p>
            <p class="val">{{ detailInfo.planAmt }}</p>
          </div>
          <div class="item flex">
            <p class="label">已入库数：</p>
            <p class="val">{{ detailInfo.warehouseRealAmt }}</p>
          </div>
          <div class="item flex">
            <p class="label">工费单价：</p>
            <p class="val">{{ detailInfo.laborPriceType == 1 ? detailInfo.laborPrice : Number(detailInfo.laborRate || 0) * Number(detailInfo.productPrice || 0) }}</p>
          </div>
          <div class="item flex">
            <p class="label">材质单价：</p>
            <p class="val">{{ detailInfo.materialPrice }}</p>
          </div>
          <div class="item flex">
            <p class="label">退货数量：</p>
            <p class="val">{{ detailInfo.returnAmt }}</p>
          </div>
          <div class="item flex">
            <p class="label">退货金额：</p>
            <p class="val">{{ detailInfo.returnAmount }}</p>
          </div>
          <div class="item flex">
            <p class="label">申购单号：</p>
            <p class="val highlight">{{ detailInfo.planNo }}</p>
          </div>
          <div class="item flex">
            <p class="label">申购部门：</p>
            <p class="val">{{ detailInfo.salesmanDeptName }}</p>
          </div>
          <div class="item flex">
            <p class="label">申购人：</p>
            <p class="val">{{ detailInfo.salesmanName }}</p>
          </div>
          <div class="item flex">
            <p class="label">收货仓：</p>
            <p class="val">{{ detailInfo.warehouseName }}({{ detailInfo.warehouseCode }})</p>
          </div>
          <div class="item flex">
            <p class="label">店铺：</p>
            <p class="val">{{ detailInfo.shopName }}</p>
          </div>
          <div class="item flex">
            <p class="label">采购方：</p>
            <p class="val">{{ detailInfo.purchaseOrgName }}</p>
          </div>
          <div class="item flex">
            <p class="label">采购员：</p>
            <p class="val">{{ detailInfo.purchaseUname }}</p>
          </div>
          <div class="item flex">
            <p class="label">采购进度：</p>
            <p class="val">{{ detailInfo.purchaseStatus }}</p>
          </div>
          <div class="item flex">
            <p class="label">采购订单：</p>
            <div class="highlight val" v-if="detailInfo.purchaseNo">
              <p v-for="bill in detailInfo.purchaseNo.split(',')" :key="bill">{{ bill }}</p>
            </div>
          </div>
          <div class="item flex">
            <p class="label">标签：</p>
            <div class="flex-wrap flex-wrap">
              <PurchaseLabelsPopover v-if="detailInfo.labels" :labelAuth="labelAuth" source="application" :labels="detailInfo.labels" :edit="false" :billInfo="detailInfo" :showNum="100" />
              <a-button style="margin-left: 5px" size="mini" @click="showSetLabel = true">
                <icon-plus />
              </a-button>
            </div>
          </div>
          <div class="item flex">
            <p class="label">期望交货日期：</p>
            <p class="val">{{ $setTime(detailInfo.gmtExpectDelivery, 'YYYY-MM-DD') }}</p>
          </div>
          <div class="item flex">
            <p class="label">计划交货日期：</p>
            <p class="val">{{ $setTime(detailInfo.gmtPlanDelivery, 'YYYY-MM-DD') }}</p>
          </div>
          <div class="item flex">
            <p class="label">接单时间：</p>
            <p class="val">{{ $setTime(detailInfo.gmtAccept) }}</p>
          </div>
          <div class="item flex">
            <p class="label">首次入库时间：</p>
            <p class="val">{{ $setTime(detailInfo.gmtFirstDelivery) }}</p>
          </div>
          <div class="item flex">
            <p class="label">末次入库时间：</p>
            <p class="val">{{ $setTime(detailInfo.gmtLastDelivery) }}</p>
          </div>
        </a-scrollbar>
        <ApplicationItemStorage style="height: calc(84vh - 160px)" v-if="activeTab == '2'" :currentData="detailInfo" />
        <PurchaseComment source="application" style="height: calc(84vh - 160px); padding-bottom: 10px" v-if="activeTab == '3'" :currentData="detailInfo" />
        <PurchaseItemLog source="application" style="height: calc(84vh - 160px)" v-if="activeTab == '4'" :currentData="detailInfo" />
      </div>
    </div>
  </a-modal>
  <!-- 设置标签 -->
  <SetPurchaseLabel v-if="showSetLabel" :isShow="showSetLabel" source="application" :list="[detailInfo]" @closed="showSetLabel = false" @success="getDetail()" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import PurchaseComment from './purchaseComment.vue'
  import PurchaseItemLog from './purchaseItemLog.vue'
  import { getPurchasePlanItemInfo } from '@/api/purchaseApplication'
  import { parseJson, getStrVal } from '@/utils'
  import PurchaseLabelsPopover from './purchaseLabelsPopover.vue'
  import SetPurchaseLabel from './setPurchaseLabel.vue'
  import ApplicationItemStorage from './applicationItemStorage.vue'

  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    source: {
      //demander需求方申购单  demanderItem需求方申购明细 purchaser采购方申购单  purchaserItem采购方申购明细
      type: String,
      default: 'demander',
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
    tab: {
      type: String,
      default: '1',
    },
    labelAuth: {
      type: Boolean,
    },
  })

  const showDetail = ref(props.isShow)
  const detailInfo = ref<any>({})
  const showSetLabel = ref(false)
  const activeTab = ref(props.tab)
  const statusMap = {
    0: '已作废',
    1: '草稿中',
    10: '待审核',
    11: '已驳回',
    20: '待接单',
    21: '已拒单',
    30: '待采购',
    31: '采购中',
    32: '待入库',
    40: '已完成',
    41: '已截单',
  }

  // 获取详情
  async function getDetail() {
    if (!props.currentItem?.id) return
    detailInfo.value = {}
    const res: any = await getPurchasePlanItemInfo({ id: props.currentItem.id })
    detailInfo.value = res?.data || {}
    let purchaseSpecs = detailInfo.value.purchaseSpecs ? parseJson(detailInfo.value.purchaseSpecs, {}) : {}
    detailInfo.value.purchaseSpecsArr = Object.values(purchaseSpecs)
  }
  getDetail()
  // 关闭
  function closedDialog() {
    showDetail.value = false
    emit('closed')
  }

  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
</script>

<style lang="less" scoped>
  .purchase-application-item-detail {
    height: calc(84vh - 100px);
    display: flex;
    .product-info-w {
      width: 50%;
      margin-right: 10px;
      flex-shrink: 0;
      padding-right: 10px;
      border-right: 1px solid #eee;
    }
    .product-info {
      display: flex;
      .img-w {
        margin-right: 10px;
        width: 120px;
        height: 120px;
        border: 1px solid #eee;
        overflow: hidden;
        flex-shrink: 0;
        margin-right: 10px;
      }
      .sku-info {
        font-size: 13px;
        line-height: 16px;
        p {
          margin-bottom: 6px;
        }
      }
      .purchase-info {
        margin-top: 30px;
        font-size: 12px;
        line-height: 16px;
        p {
          margin-bottom: 6px;
        }
        .header {
          font-size: 14px;
          font-weight: bold;
          line-height: 16px;
          margin-bottom: 10px;
          border-left: 3px solid rgb(var(--primary-4));
          padding-left: 10px;
          .title {
            margin-right: 30px;
            width: 90px;
          }
        }
      }
    }
    .purchase-detail-order {
      flex: 1;
      width: 50%;
      overflow: hidden;
      .application-info-w {
        .item {
          margin-top: 10px;
        }
        .label {
          color: #888;
          width: 100px;
          text-align: right;
          flex-shrink: 0;
        }
        .val {
          flex: 1;
        }
        .urgent {
          font-size: 12px;
          display: inline-block;
          background-color: red;
          color: #fff;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          line-height: 18px;
          text-align: center;
          transform: scale(0.82);
          margin-left: 10px;
        }
      }
    }
  }
</style>
